<template>
    <div class="page-mainframe">
      <!-- <v-toolbar dark color="primary">
        <v-spacer></v-spacer>
        <v-toolbar-title>{{ mainFrameTitle }}</v-toolbar-title>
        <v-spacer></v-spacer>
      </v-toolbar> -->
      <v-card :height="height" style="overflow: hidden;">
        <transition
          :name="pageTransitionEffect"
          @before-enter="handleBeforeEnter"
          @after-enter="handleAfterEnter"
          @before-leave="handleBeforeLeave">
          <keep-alive
            :include="[...keepAlivePages]">
            <router-view
              :key="routerViewKey"
              :class="['app-view', pageTransitionClass]"
              :data-page-id="$route.fullPath">
            </router-view>
          </keep-alive>
        </transition>
        <update-toast></update-toast>
        <v-bottom-nav absolute :value="navVisable" :active.sync="e3" color="primary">
          <router-link :to="{ path: nav.id, params: {} }" v-for="nav in navBtns" :key="nav.id">
            <v-btn flat color="white">
              <!-- <span>{{ nav.text }}</span> -->
              <v-icon>{{ nav.icon }}</v-icon>
            </v-btn>
          </router-link>
        </v-bottom-nav>
      </v-card>
    </div>
</template>

<script>
import Vue from 'vue'
import {mapState, mapActions} from 'vuex'
import UpdateToast from '@/components/UpdateToast'
import {keepAlivePages} from '@/.lavas/router'

const ENABLE_SCROLL_CLASS = 'app-view-scroll-enabled'

export default {
  components: {
    UpdateToast
  },
  data () {
    return {
      keepAlivePages,
      height: '0px',
      navBtns: [
        {text: '音乐', icon: 'music_note', id: '/mainframe/music-note'},
        {text: '视频', icon: 'music_video', id: '/mainframe/music-video'},
        {text: '个人中心', icon: 'library_music', id: '/mainframe/library-music'},
        {text: '聊天', icon: 'chat', id: '/mainframe/chat'},
        {text: '分享', icon: 'speaker_notes', id: '/mainframe/speaker-notes'}
      ],
      mainFrameTitle: '每日任务',
      e3: 2,
      navVisable: true
    }
  },
  computed: {
      ...mapState('pageTransition', {
          pageTransitionType: state => state.type,
          pageTransitionEffect: state => state.effect
      }),

      ...mapState('scrollBehavior', {
          scrollPostionMap: state => state.scrollPostionMap
      }),

      pageTransitionClass() {
          return `transition-${this.pageTransitionType}`
      },
      routerViewKey() {
          let {name, params} = this.$route;
          let paramKeys = Object.keys(params);
          if (paramKeys.length) {
              return name + paramKeys.reduce((prev, cur) => prev + params[cur], '')
          }
          return null;
      }
  },
  mounted () {
    this.resize()
  },
  methods: {
    ...mapActions('scrollBehavior', [
      'savePageScrollPosition'
    ]),
    restoreContainerScrollPosition(containerEl, scrollTop) {
      containerEl.classList.add(ENABLE_SCROLL_CLASS)
      containerEl.scrollTop = scrollTop
    },
    restoreBodyScrollPosition(containerEl, scrollTop) {
      containerEl.classList.remove(ENABLE_SCROLL_CLASS)
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop
    },
    handleBeforeEnter(el) {
      let pageId = el.dataset.pageId;
      let {y: scrollTop = 0} = this.scrollPostionMap[pageId] || {}
      Vue.nextTick(() => {
        this.restoreContainerScrollPosition(el, scrollTop)
      })
    },
    handleAfterEnter(el) {
      let pageId = el.dataset.pageId
      let {y: scrollTop = 0} = this.scrollPostionMap[pageId] || {}
      this.restoreBodyScrollPosition(el, scrollTop)
    },
    resize () {
      // this.height = Number(window.getComputedStyle(document.querySelector('body')).height.replace('px', '')) - 56 + 'px'
      this.height = Number(window.getComputedStyle(document.querySelector('body')).height.replace('px', '')) + 'px'
    },
    handleBeforeLeave(el) {
      let pageId = el.dataset.pageId
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      this.restoreContainerScrollPosition(el, scrollTop)
      this.savePageScrollPosition({
        pageId,
        scrollPosition: {y: scrollTop}
      })
    }
  },
  watch: {
    e3 (val) {
      this.mainFrameTitle = this.navBtns[val].text
    }
  }
}
</script>

<style lang="stylus" scoped>
$page-transition-duration = 0.35s

.page-mainframe
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  -webkit-overflow-scrolling touch
  background white
  overflow hidden

  &::-webkit-scrollbar
      width 0
      background transparent

  &.transition-slide
      transition transform $page-transition-duration cubic-bezier(0, 0, 0.2, 1)

      &.slide-left-enter
          transform translate(100%, 0)

      &.slide-left-enter-active
          box-shadow 0 0 16px 2px rgba(0, 0, 0, 0.3)

      &.slide-right-enter
          transform translate(-30%, 0)
          transition-timing-function linear

      &.slide-right-leave-active
          transform translate(100%, 0)
          box-shadow 0 0 16px 2px rgba(0, 0, 0, 0.3)
          z-index 99

      &.slide-left-leave-active
          transform translate(-30%, 0)
          transition-timing-function linear

      &.app-view-scroll-enabled,
      &.slide-left-enter-active,
      &.slide-left-leave-active,
      &.slide-right-enter-active,
      &.slide-right-leave-active
          overflow-y auto

  &.transition-fade
      opacity 1
      transition opacity 1s ease

      &.fade-enter
          opacity 0

      &.fade-leave-active
          opacity 0

  .bottom-nav
      a
        width 100%
        text-decoration none

  .card
    position relative
    width 100%
    height 100%
    overflow hidden
</style>
